<template>
    <el-dialog v-model="show" :show-colse="false" width="500" :show-close="false" align-center center
        class="bind-dialog" :close-on-click-modal="false">
        <template #title>
            <custom-title title="新增支付账号" />
        </template>
        <BindBank v-model="bindForm" ref="formRef" @sendCode="sendBindCode" :currentAccountData="currentAccountData"
            :sendCodeStatus="sendCodeStatus" :allowBind="allowBind"/>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="show = false">取消</el-button>
                <el-button type="primary" @click="comfirm">
                    绑定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, computed } from "vue";
import { payConfig } from "@/utils/config";
import { addBankCard, confirmAddBankCard } from "@/apis/purse";
import BindBank from "../BindBank";
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: true
    },
    currentAccountData: {
        type: Object,
        default: () => { }
    },
});
const formRef = ref()
const emit = defineEmits(['update:modelValue', 'getList']);
const show = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
});
const bindForm = ref({
    accountType: props.currentAccountData.memberType == 2 ? 'ENTERPRISE' : 'INDIVIDUAL',
    cardType: 'DEBIT_CARD'
});
const allowBind=ref(false);
/**
 * 验证码当前状态
 */
const sendCodeStatus = ref({
    status: false,
    time: 60,
    timer: null
})
/**
 * 重置倒计时
 */
const clearTimer = () => {
    sendCodeStatus.value.status = false;
    clearInterval(sendCodeStatus.value.timer);
    sendCodeStatus.value.time = 60;
}
/**
 * 发送验证码之后的回调
 */
const sendCodeCallback = () => {
    sendCodeStatus.value.status = true;
    sendCodeStatus.value.timer = setInterval(() => {
        sendCodeStatus.value.time--;
        if (sendCodeStatus.value.time <= 0) {
            clearTimer()
        }
    }, 1000)
}
const registerBankInfo = ref({})
/**
 * 发送绑定银行卡短信or打款
 */
const sendBindCode = async () => {
    try {
        const params = {
            ...bindForm.value,
            walletId: props.currentAccountData.walletId,
            ...payConfig,
            memberId: props.currentAccountData.memberId
        }
        const res = await addBankCard(params);
        registerBankInfo.value = res.data;
        allowBind.value = true;
        sendCodeCallback();
    } catch (error) {
        console.log(error);
    }
}
/**
 * 确认
 */
const comfirm = async () => {
    if ((await formRef.value.validate())) {
        try {
            let confingParams = {
                ...registerBankInfo.value,
                ...payConfig,
            }
            if (bindForm.value?.accountType == 'INDIVIDUAL') {
                confingParams.verifyCode = bindForm.value.verifyCode;
            } else {
                confingParams.amount = bindForm.value.amount;
            }
            await confirmAddBankCard(confingParams);
            clearTimer();
            emit('getList')
            show.value = false;
        } catch (error) {
            console.log(error);
        }
    }
}

</script>

<style lang="scss" scoped>
::v-deep(.space) {
    flex: 1;
    display: flex;
    gap: 10px;
}
</style>